<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>垃圾分类查询</title>
<link href="<%=path%>/static/usercss/css/all.css?ehweee43w3" rel="stylesheet" type="text/css">

<!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->

<!-- 点击查看更多和收起 -->
<style type="text/css">
	#more{
		cursor:pointer; 
	}
	#more:hover{
		color:skyblue;
	}
	#close{
		cursor:pointer; 
	}
	#close:hover{
		color:skyblue; 
	}
	#button{
		cursor:pointer;
	}	
</style>
<!-- 回复样式 -->
<style type="text/css">
	#reply{
		cursor:pointer;
		margin-left:20px;
	}
	#reply:hover{
		color:skyblue;
	}
	#cancelReply{
		display:none;
		cursor:pointer;
	}
	#cancelReply:hover{
		color:skyblue;
	}
	
</style>


</head>
<body>


<c:set var="pageNum" value="${requestScope.pageInfo.pageNum}"></c:set>

<section>
<div class="wrap">
  <div id="seach">
    <div id="logo"><a href="http://fenlicx.qinglab.cn" title="垃圾分类查询">分类查询</a></div>
    
  </div>

<article class="article">
  <div class="main">
    <div class="title">
      <span>发布者：${requestScope.article.userinfo.nickName}</span>
      <span>来源：${requestScope.article.source}</span>
    </div>
    <h1>${requestScope.article.title }</h1>
    <p>${requestScope.article.content }</p>
    
<!-- 点赞开始 -->  
<%--     <div class="handle">
	   	<a id="removePraise" href="javaScript:void(0)" style="display:${requestScope.isPraise?'block':'none'};" class="active" title="赞">赞</a>
	   	<a id="addPraise" href="javaScript:void(0)" style="display:${requestScope.isPraise?'none':'block'};" title="已点赞">否</a>
	    <span id="praiseCount">${requestScope.article.praiseCount}</span>
 <!-- 点赞结束 -->  
 <!-- 收藏开始 -->	
 		<a class="collect-off" id="removeCollect" style="display:${requestScope.isCollect?'block':'none'};cursor:pointer; " title="已收藏"></a>
 		<a class="collect" id="addCollect" style="display:${requestScope.isCollect?'none':'block'};cursor:pointer; " title="收藏"></a>
 		<span id="collectCount">${requestScope.article.collectCount}</span>
  	</div> --%>
 <!-- 收藏结束 -->  	
  </div>

<!-- 评论开始 -->   
<%-- <div class="comment">
  <div class="commentinput">
  
    <form id="form1" action="<%=path%>/web/article/addFir" method="post">
      <textarea id="content" name="content" cols="" rows="" placeholder="写下您的评论..."></textarea>
      	<input type="hidden" name="article.id" value="${requestScope.article.id }"/>
       	<input type="hidden" name="userinfo.id" value="${sessionScope.userinfo.id }"/>
        <input type="hidden" name="parentId" value="0"/>
      <input type="submit" class="seach_bun" name="button" value="提交评论">
    </form>
    
    <div id="comments">
    	<ul>
	    <c:forEach items="${requestScope.pageInfo.list }" var="comment">
	    	<li id="firComment">
	        <div class="us">
		        <img src="<%=path %>/static/head_img/${comment.userinfo.headName}" alt="评论者">
		        <span>${comment.userinfo.nickName }</span> <span>日期&nbsp;<fmt:formatDate value="${comment.inputTime }" pattern="yyyy-MM-dd"/></span>
		        <span id="reply">回复</span><span id="cancelReply">取消回复</span>
	        </div>
	        <p>${comment.content }</p>
	        <c:if test="${not empty comment.childComments }">
	        	<div id="child" style="display:none;">
		        <ul id="">
		        <c:forEach begin="0" end="${fn:length(comment.childComments)}" varStatus="stat"  items="${comment.childComments }">
		          <li>
		            <div class="us"><img src="<%=path %>/static/head_img/${comment.childComments[fn:length(comment.childComments)-stat.count].userinfo.headName}" alt="评论者"><span>${comment.childComments[fn:length(comment.childComments)-stat.count].userinfo.nickName }</span> <span>日期&nbsp;<fmt:formatDate value="${comment.childComments[fn:length(comment.childComments)-stat.count].inputTime }" pattern="yyyy-MM-dd"/></span></div>
		            <p>${comment.childComments[fn:length(comment.childComments)-stat.count].content }</p>
		           </li>
		         </c:forEach>	
		         </ul>
		         </div>
		         <p  id="more">共${fn:length(comment.childComments)}条回复>>></p><p style="display:none" id="close">收起<<</p>
	          </c:if>
	          
	          <div style="display:none;" id="replyDiv">
          		<form>
			     <textarea id="content2" placeholder="写下您的回复..."></textarea>
			      <input type="hidden" id="parentId" value="${comment.id }"/>
			     <input type="button" class="seach_bun" id="sub2" value="确认回复">
			   </form>
	          </div>
	          
	        </li>
	    </c:forEach>
    	</ul>
    </div>
    
<!-- 分页开始 -->
  <div class="pagination">
    <a id="first" href="">首页</a>
    <c:forEach items="${requestScope.pageInfo.navigatepageNums }" var="page">
    	<a id="page${page }" href="javaScript:void(0)" class="number">${page}</a>
    </c:forEach>
    <a id="last" href="">尾页</a>
    <span>共${requestScope.pageInfo.pages}页</span>&nbsp;&nbsp;
	<span>共&nbsp;${requestScope.pageInfo.total}&nbsp;条评论</span>
  </div>
<!-- 分页结束 -->
      
 </div>
</div> --%>
<!-- 评论结束 -->  
</article>
</div>
</section>



<script type="text/javascript" src="<%=path%>/static/js/jquery-3.2.1.js"></script>
<script src="<%=path%>/static/managecss/lib/layer/2.4/layer.js"></script>
<script type="text/javascript">
$(function(){
	var path = "${pageContext.request.contextPath}";
	var page = 1
	refresh();
	function login(){
		layer.confirm('请前往登录', {
			  btn: ['前往', '取消'] 
			  ,
			}, function(index, layero){
				location.href = path+"/web/userLogin/login";
				layer.close(index);	
			
			}, function(index){
			  			
			}); 
	}
	/*首页和尾页*/
	$("a[id=first]").click(first);
	$("a[id=last]").click(last);
	function first(){
		var pageNum = 1;
		page = 1;
		$.get(path+"/web/article/comment",
				{pageNum:pageNum,
				 articleId:"${requestScope.article.id}"},
				function(data){
					 $("#comments").html(data);
					 again();
				});
	}
	
	function last(){
		var num =$(this).next().val();
		var pageNum = num;
		page = num;
		$.get(path+"/web/article/comment",
				{pageNum:pageNum,
				 articleId:"${requestScope.article.id}"},
				function(data){
					 $("#comments").html(data);
					 again();
				});
	}
	
	/*点击查看更多回复*/
	 $("p[id=more]").click(function(){
		var child = $(this).parent("li[id=firComment]").find("div[id=child]");
		child.css("display","inline");
		$(this).css("display","none");
		var close = $(this).next();
		close.css("display","inline");
		
	});
	/*点击查看更多回复（ajax用）*/
	 function more(){
		var child = $(this).parent("li[id=firComment]").find("div[id=child]");
		child.css("display","inline");
		$(this).css("display","none");
		var close = $(this).next();
		close.css("display","inline");
	}
	
	/*点击收起*/
	$("p[id=close]").click(function(){
		var child = $(this).parent("li[id=firComment]").find("div[id=child]");
		child.css("display","none");
		$(this).css("display","none");
		var more = $(this).prev();
		more.css("display","inline");
	});
	/*点击收起（ajax用）*/
	function close(){
		var child = $(this).parent("li[id=firComment]").find("div[id=child]");
		child.css("display","none");
		$(this).css("display","none");
		var more = $(this).prev();
		more.css("display","inline");
	}
	
	/*点击页码ajax返回*/
	$("a[class=number]").click(function(){
		var pageNum = $(this).html();
		page = pageNum;
		$.get(path+"/web/article/comment",
				{pageNum:pageNum,
				 articleId:"${requestScope.article.id}"},
				function(data){
					 $("#comments").html(data);
					 again();
					
				}.bind(this));
	});
	/*刷新局部*/
	function refresh(){
		var pageNum = page;
		$.get(path+"/web/article/comment",
				{pageNum:pageNum,
				 articleId:"${requestScope.article.id}"},
				function(data){
					 $("#comments").html(data);
					 again();
				});
	}
	
	function refresh1(){
		var pageNum = $(this).html();
		page = pageNum;
		$.get(path+"/web/article/comment",
				{pageNum:pageNum,
				 articleId:"${requestScope.article.id}"},
				function(data){
					 $("#comments").html(data);
					 again();
				});
	}
	
	/*重新添加事件*/
	function again(){
		$("p[id=more]").click(more);
		$("p[id=close]").click(close);
		$("a[class=number]").css("background-color","white");
		$("a[class=number]").css("color","black");
		$("a[id=first]").click(first);
		$("a[id=last]").click(last);
		$("a[class=number]").click(refresh1);
		//与回复有关
		$("span[id=reply]").click(clickReply);
		$("span[id=cancelReply]").click(clickCancelReply);
		$("textarea[id=content2]").focus(checkIsLogin);
		$("input[id=sub2]").click(clickSubmitReply);
	}
	
	
	/*输入框获得焦点时判断是否登录*/
	$("#content").focus(function(){
		var user = "${sessionScope.userinfo.id}"
		if(user==""){
			login();
		}
	});
	/*点击提交评论*/
	$("#form1").submit(function(){
		var user = "${sessionScope.userinfo.id}"
		if(user==""){
			login();
			return false;
			//location.href = path+"user/login"
		}else{
			var content = $("#content").val();
			if(content!=""){
				return true;
			}else{
				layer.msg("内容不能为空");
				return false;
			}
		}		
	});
	
	/*回复评论在这里*/
	/*点击回复*/
	$("span[id=reply]").click(function(){
		$(this).css("display","none");
		$(this).next().css("display","inline");
		$(this).parent().parent("li[id=firComment]").find("div[id=replyDiv]").css("display","inline")
	});
	/*点击回复 ajax*/
	function clickReply(){
		$(this).css("display","none");
		$(this).next().css("display","inline");
		$(this).parent().parent("li[id=firComment]").find("div[id=replyDiv]").css("display","inline")
	}
	
	/*点击取消回复*/
	$("span[id=cancelReply]").click(function(){
		$(this).css("display","none");
		$(this).prev().css("display","inline")
		$(this).parent().parent("li[id=firComment]").find("div[id=replyDiv]").css("display","none")
	});
	/*点击取消回复 ajax*/
	function clickCancelReply(){
		$(this).css("display","none");
		$(this).prev().css("display","inline")
		$(this).parent().parent("li[id=firComment]").find("div[id=replyDiv]").css("display","none")
	}
	
	/*回复输入框获得焦点时判断是否登录*/
	$("textarea[id=content2]").focus(function(){
		var user = "${sessionScope.userinfo.id}"
		if(user==""){
			login();  
		}
	});
	/*回复输入框获得焦点时判断是否登录 ajax*/
	function checkIsLogin(){
		var user = "${sessionScope.userinfo.id}"
		if(user==""){
			login();   
		}
	}
	/*点击提交回复*/
	$("input[id=sub2]").click(function(){
		var userinfoId = "${sessionScope.userinfo.id}"
		if(userinfoId==""){
			login();
			//location.href = path+"user/login"
		}else{
			var content2 = $(this).parent().parent("div[id=replyDiv]").find("textarea[id=content2]").val();
			var articleId = "${requestScope.article.id }"
			var parentId = 	$(this).parent().parent("div[id=replyDiv]").find("input[id=parentId]").val();
			//alert(content2+",,"+articleId+",,"+parentId+",,"+userinfoId);
			if(content2!=""){
				$.ajaxSettings.async = false;
				$.post(path+"/web/article/addSec",
						{userinfoId:userinfoId,
						 articleId:articleId,
						 parentId:parentId,
						 content:content2},
						function(data){
							 refresh();
							 
						}.bind(this));
			}else{
				layer.msg("内容不能为空");
			}
		}		
	});
	/*点击提交回复 ajax*/
	function clickSubmitReply(){
		var userinfoId = "${sessionScope.userinfo.id}"
		if(userinfoId==""){
			login();
			//location.href = path+"user/login"
		}else{
			var content2 = $(this).parent().parent("div[id=replyDiv]").find("textarea[id=content2]").val();
			var articleId = "${requestScope.article.id }"
			var parentId = 	$(this).parent().parent("div[id=replyDiv]").find("input[id=parentId]").val();
			//alert(content2+",,"+articleId+",,"+parentId+",,"+userinfoId);
			if(content2!=""){
				$.ajaxSettings.async = false;
				$.post(path+"/web/article/addSec",
						{userinfoId:userinfoId,
						 articleId:articleId,
						 parentId:parentId,
						 content:content2},
						function(data){
							 refresh();
						}.bind(this));
			}else{
				layer.msg("内容不能为空");
			}
		}		
	}
	
	/*点赞这里找*/
	/*点赞*/
	var articleId = "${requestScope.article.id}"
	$("#addPraise").click(function(){
		var user = "${sessionScope.userinfo.id}"
		var praiseCount = parseInt($("#praiseCount").html());
			if(user==""){
				login();  
			}else{
				$("#addPraise").css("display","none");
				$("#removePraise").css("display","block")
				$.ajaxSettings.async = false;
				$.post(path+"/web/article/addPraise",
						{articleId:articleId},
						function(data){
						
							$("#praiseCount").html(praiseCount+1)
				});
			}
		
	});
	/*取消点赞*/
	$("#removePraise").click(function(){
		var user = "${sessionScope.userinfo.id}"
			var praiseCount = parseInt($("#praiseCount").html());
			if(user==""){
				login();
			}else{
				$("#addPraise").css("display","block");
				$("#removePraise").css("display","none")
				$.ajaxSettings.async = false;
				$.post(path+"/web/article/removePraise",
						{articleId:articleId},
						function(data){
						
							$("#praiseCount").html(praiseCount-1)
				});
			}
		
	});
	
/*收藏这里找*/	
	/*收藏*/
	
	$("#addCollect").click(function(){
		var user = "${sessionScope.userinfo.id}"
		var collectCount = parseInt($("#collectCount").html());
			if(user==""){
				login(); 
			}else{
				$("#addCollect").css("display","none");
				$("#removeCollect").css("display","block")
				$.ajaxSettings.async = false;
				$.post(path+"/web/article/addCollect",
						{articleId:articleId},
						function(data){
						
							$("#collectCount").html(collectCount+1)
				});
			}
		
	});
	/*取消收藏*/
	$("#removeCollect").click(function(){
		var user = "${sessionScope.userinfo.id}"
			var collectCount = parseInt($("#collectCount").html());
			if(user==""){
				login();  
			}else{
				$("#addCollect").css("display","block");
				$("#removeCollect").css("display","none")
				$.ajaxSettings.async = false;
				$.post(path+"/web/article/removeCollect",
						{articleId:articleId},
						function(data){
						
							$("#collectCount").html(collectCount-1)
				});
			}
		
	});	
	
});
</script>
</body>
</html>
